  <template>
    <div class="home" style="background-color: #f5f5f5;">
      
          <scrollNav></scrollNav>
          <TopView></TopView>
          <div class="main-center">
            <SwiperTest />
            <courseView type="free" pageSize="5"></courseView>
            <courseView type="boutique" pageSize="5" ></courseView>
            <courseView type="discount" pageSize="5" ></courseView>
            <toutiaoView />
            
        </div> 
        <footerView />
    </div>
  </template>

<script>

/* import { getLoop, getList, getClassifyList, getCourseDetail } from '../api/request' */
import SwiperTest from '../../components/SwiperTest.vue'
import scrollNav from '../../components/scrollNav.vue'
import courseView from './components/courseView.vue'
import footerView from '../../components/footerView.vue'
import toutiaoView from './components/toutiaoView.vue'
import TopView from './components/TopView.vue'

export default {
  name: 'HomeView',
  components: {
    SwiperTest,
    scrollNav,
    courseView,
    footerView,
    toutiaoView,
    TopView,
  },
  data() {
    return {
      list: [],
      freeCourseList: [],
      boutiqueCourseList: [],
      discountCourseList: [],
      classifyList: [],
    }
  },
  created() {
    
  }
}
</script>

<style lang="less" scoped>
.banner img {
  width: 500px;
}

.box {
  width: 1200px;
  background: white;
  margin: auto;
  display: flex;
  margin-top: 20px;
}

.courseItem {
  width: 220px;
  font-size: 12px;
  padding: 0 10px;
}

.courseItem img {
  width: 215px;
  height: 112px;

}



/* 主体部分 */
.main-center{
    width: 1160px;
    margin: -50px auto 0;
}
</style>

